<div class="dash">
  <div id="user" style="width: 600px; height: 400px"></div>
  <div id="shop" style="width: 600px; height: 400px"></div>
</div>

<script type="text/javascript">
  user();
  shop();

  function user() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("user"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "用户新增趋势图",
      },
      tooltip: {},
      legend: {
        data: ["数量"],
      },
      xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      },
      yAxis: {},
      series: [
        {
          name: "数量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  function shop() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("shop"));

    // 指定图表的配置项和数据
    var option = {
      color: [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#91c7ae",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
      ],
      title: {
        text: "商品销售排行图",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
</script>
